<template>
    <!--地图挂载dom-->
    <div id="map">
    </div>
</template>

<script>
    //引入依赖
    import Map from 'ol/Map';
    import {XYZ} from 'ol/source';
    import View from 'ol/View';
    import {Tile as TileLayer} from 'ol/layer';

    export default {
        name: "GaoDeMap",
        data() {
            return {}
        },
        mounted() {
            //高德地图也是一种瓦片图层，是通过行列号与层级(zoom)关系加载的
            var gaodeMapLayer = new TileLayer({
                title: "高德地图",
                source: new XYZ({
                    url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
                    wrapX: false
                })
            });

            var map = new Map({
                layers: [gaodeMapLayer],
                view: new View({
                    center: [12958752, 4848452],
                    projection: 'EPSG:3857',
                    zoom: 8,
                    minZoom: 1
                }),
                target: 'map'
            });
        },
    }
</script>

<style scoped>

</style>